<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - equirectangular panorama</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            position: absolute;
            top: 0px; width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family:Monospace;
            font-size:13px;
            font-weight: bold;
            text-align:center;
        }

        a {
            color: #ffffff;
        }
        #showpic{
            position:absolute;
            z-index: 99999;
            width: auto;
            height: auto;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 200px;
        }
    </style>

</head>
<body>

<div id="container"></div>
<button id="showpic" style="color: #ffffff;position:absolute;top:0px;width: 100%;display: none">showpic</button>
<script src="../build/three.js"></script>
<script src="./js/controls/OrbitControls.js"></script>
<script src="../build/AVR.js"></script>
<script>



    window.onload=function () {
        init();//初始化
    }
    function init() {
        var scene, renderer;
        var container, mesh;
        container = document.getElementById( 'container' );
        renderer = new THREE.WebGLRenderer();
        scene = new THREE.Scene();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        var ar=new AR(scene,renderer,container);
        ar.openAudio=false;
        ar.cameraIndex=1;
        ar.init();//初始化AR
        ar.play();

        document.getElementById("showpic").addEventListener("click",function () {
            alert(ar.video);
            ar.video.play();
        },false);
        var envLight=new THREE.AmbientLight(0xffffff,1);
        scene.add(envLight);

        light = new THREE.DirectionalLight(0xffffff, 1.0, 0);//设置平行光源
        light.position.set( 400, 700, -800 );//设置光源向量
        scene.add( light );

        var geometry = new THREE.SphereGeometry( 50, 60, 40 );

        var material = new THREE.MeshLambertMaterial( {
            map: new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' )
        } );

        mesh = new THREE.Mesh( geometry, material );
        mesh.position.set(0,0,-200);
        scene.add( mesh );

        function animate() {
            requestAnimationFrame(animate);
            mesh.rotation.y +=0.01;

            mesh.rotation.x += 0.005;
            mesh.rotation.y += 0.01;

        }
        animate();

    }



</script>

</body>
</html>
